<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>TodoMVC</title>
		<link rel="stylesheet" href="node_modules/todomvc-common/base.css" />
		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css" />
		<!-- CSS overrides - remove if you don't need it -->
		<link rel="stylesheet" href="css/app.css" />
		<script src="../CND/lib/react/react.development.js"></script>
		<script src="../CND/lib/react/react-dom.development.js"></script>
		<script src="../CND/lib/babel.min.js"></script>
	</head>
	<body>
		<div id="root"></div>
		<script src="node_modules/todomvc-common/base.js"></script>
		<script src="js/app.js"></script>
		<script type="text/babel">
			/**
			 * todos 容器组件
			 */
			class Section extends React.Component {
				constructor(props) {
					super(props);
				}
				render() {
					return (
						<section className={this.props.className}>
							{this.props.children}
						</section>
					);
				}
			}

			/**
			 * todos header 头部
			 */
			class TodoHeader extends React.Component {
				constructor(props) {
					super(props);
				}
				render() {
					return (
						<header className="header">
							<h1>todos</h1>
							<input
								className="new-todo"
								placeholder="What needs to be done?"
								autoFocus
								onChange={this.handleInput}
							/>
						</header>
					);
				}

				handleInput = (e) => {
					
				}
			}

			/**
			 * todos main 内容区
			 */
			class TodoSection extends React.Component {
				constructor(props) {
					super(props);
				}
				render() {
					return (
						<Section className="main">
							<input id="toggle-all" className="toggle-all" type="checkbox" />
							<label htmlFor="toggle-all">Mark all as complete</label>
							<TodoList className="todo-list">
								<TodoItem />
							</TodoList>
						</Section>
					);
				}
			}

			/**
			 * 列表容器
			 */
			class TodoList extends React.Component {
				constructor(props) {
					super(props);
				}
				render() {
					return (
						<ul className={this.props.className}>{this.props.children}</ul>
					);
				}
			}

			/**
			 * 列表项
			 */
			class TodoItem extends React.Component {
				constructor(props) {
					super(props);
				}
				render() {
					return (
						<li className="completed">
							<div className="view">
								<input className="toggle" type="checkbox" checked />
								<label>Buy a unicorn</label>
								<button className="destroy"></button>
							</div>
							<input className="edit" value="Rule the web" />
						</li>
					);
				}
			}

			/**
			 * todos footer 尾部
			 */
			class TodoFooter extends React.Component {
				constructor(props) {
					super(props);
				}
				render() {
					return (
						<footer className="footer">
							<span className="todo-count">
								<strong>0</strong> item left
							</span>

							<ul className="filters">
								<li>
									<a className="selected" href="#/">
										All
									</a>
								</li>
								<li>
									<a href="#/active">Active</a>
								</li>
								<li>
									<a href="#/completed">Completed</a>
								</li>
							</ul>

							<button className="clear-completed">Clear completed</button>
						</footer>
					);
				}
			}

			/**
			 * footer组件
			 */
			class Footer extends React.Component {
				constructor(props) {
					super(props);
				}
				render() {
					return (
						<footer className="info">
							<p>Double-click to edit a todo</p>

							<p>
								Template by <a href="http://sindresorhus.com">Sindre Sorhus</a>
							</p>

							<p>
								Created by <a href="http://todomvc.com">you</a>
							</p>
							<p>
								Part of <a href="http://todomvc.com">TodoMVC</a>
							</p>
						</footer>
					);
				}
			}

			ReactDOM.render(
				<div>
					<Section className="todoapp">
						<TodoHeader />
						<TodoSection />
						<TodoFooter />
					</Section>
					<Footer />
				</div>,
				document.getElementById("root")
			);
		</script>
	</body>
</html>
